<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慧心守护模拟界面</title>
    <style>
        body {
            font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            /* 添加背景图 */
            background-image: url('C:\Users\Administrator\Desktop');
            background-size: cover;
            background-position: center;
        }

        /* 公共头部样式 */
        .common-header {
            background-color: #f7f7f7;
            padding: 10px 15px;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .common-header h1 {
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }

        .header-icons {
            display: flex;
            gap: 15px;
        }

        .header-icons i {
            font-size: 20px;
            color: #555;
            cursor: pointer;
        }

        /* 主体内容样式 */
        main {
            flex: 1;
            overflow-y: auto;
        }

        .page {
            display: none;
            padding: 15px;
        }

        .page.active {
            display: block;
        }

        /* 列表项公共样式 */
        .list-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #e5e5e5;
            cursor: pointer;
        }

        .list-item:hover {
            background-color: #f0f0f0;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 5px;
            background-color: #ccc;
            margin-right: 10px;
        }

        .list-item h3 {
            font-size: 16px;
            font-weight: 600;
            margin: 0;
        }

        .list-item p {
            font-size: 14px;
            color: #888;
            margin: 0;
        }

        .time {
            font-size: 12px;
            color: #888;
        }

        /* 底部导航栏样式 */
        footer {
            background-color: #f7f7f7;
            border-top: 1px solid #e5e5e5;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
        }

        footer a {
            text-decoration: none;
            color: #555;
            text-align: center;
        }

        footer a svg {
            width: 20px;
            height: 20px;
        }

        footer a p {
            font-size: 12px;
            margin: 3px 0 0;
        }

        footer a.active {
            color: #07c160;
        }

        /* 聊天框样式 */
        #chat-box {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: white;
            z-index: 100;
            flex-direction: column;
        }

        .chat-messages {
            padding: 15px;
            overflow-y: auto;
            flex: 1;
        }

        .chat-messages .message {
            margin-bottom: 10px;
            display: flex;
        }

        .chat-messages .message.me {
            justify-content: flex-end;
        }

        .chat-messages .message .bubble {
            padding: 8px 12px;
            border-radius: 8px;
            max-width: 70%;
        }

        .chat-messages .message.me .bubble {
            background-color: #07c160;
            color: white;
        }

        .chat-input {
            border-top: 1px solid #e5e5e5;
            padding: 10px 15px;
            display: flex;
            align-items: center;
        }

        .chat-input input {
            flex: 1;
            padding: 8px;
            border: 1px solid #e5e5e5;
            border-radius: 5px;
        }

        .chat-input button {
            margin-left: 10px;
            padding: 8px 15px;
            background-color: #07c160;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 圆形箭头返回按钮样式 */
        .icon-circle-arrow-left {
            position: relative;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid #555;
            cursor: pointer;
        }

        .icon-circle-arrow-left::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 30%;
            transform: translate(15%, -50%) rotate(-45deg);
            width: 10px;
            height: 10px;
            border-top: 2px solid #555;
            border-left: 2px solid #555;
        }

        /* 详情页样式 */
        .detail-page {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: white;
            z-index: 100;
        }

        .detail-page .detail-content {
            padding: 15px;
        }
    </style>
</head>

<body>
    <header class="common-header">
        <h1>彗心守护</h1>
        <div class="header-icons">
            <span style="font-size: 20px; color: #555; cursor: pointer;">搜索</span>
            <span style="font-size: 20px; color: #555; cursor: pointer;">添加</span>
        </div>
    </header>
    <main>
        <!-- 金融理财服务列表页 -->
        <div id="chat-list" class="page active">
            <div class="list-item" onclick="openChatBox('养老金管理')">
                <h3>养老金管理</h3>
            </div>
            <div class="list-item" onclick="openChatBox('理财咨询')">
                <h3>理财咨询</h3>
            </div>
            <div class="list-item" onclick="openChatBox('投资建议')">
                <h3>投资建议</h3>
            </div>
            <div class="list-item" onclick="openChatBox('财务规划')">
                <h3>财务规划</h3>
            </div>
            <div class="list-item" onclick="openChatBox('区块链钱包管理')">
                <h3>区块链钱包管理</h3>
            </div>
            <div class="list-item" onclick="openChatBox('购物消息共享')">
                <h3>购物消息共享</h3>
            </div>
        </div>
        <!-- 视频互动与人工客服页 -->
        <div id="contacts-list" class="page">
            <div class="list-item" onclick="openChatBox('人工客服支持')">
                <h3>人工客服</h3>
            </div>
            <div class="list-item" onclick="openChatBox('语音聊天服务')">
                <h3>语音聊天服务</h3>
            </div>
            <div class="list-item" onclick="openChatBox('子女信息共享')">
                <h3>子女信息共享</h3>
            </div>
            <div class="list-item" onclick="openChatBox('子女互动平台')">
                <h3>子女互动平台</h3>
            </div>
        </div>
        <!-- 健康管理与提醒页 -->
        <div id="discovery-list" class="page">
            <div class="list-item" onclick="openChatBox('健康监测')">
                <h3>健康监测</h3>
            </div>
            <div class="list-item" onclick="openChatBox('用药提醒')">
                <h3>用药提醒</h3>
            </div>
            <div class="list-item" onclick="openChatBox('忌口提醒')">
                <h3>忌口提醒</h3>
            </div>
            <div class="list-item" onclick="openChatBox('健康报告')">
                <h3>健康报告</h3>
            </div>
            <div class="list-item" onclick="openChatBox('紧急救援服务')">
                <h3>紧急救援服务</h3>
            </div>
        </div>
        <!-- 居家养老方案页 -->
        <div id="me" class="page">
            <div class="list-item" onclick="openChatBox('日常生活照料')">
                <h3>日常生活照料</h3>
            </div>
            <div class="list-item" onclick="openChatBox('医疗保健服务')">
                <h3>医疗保健服务</h3>
            </div>
            <div class="list-item" onclick="openChatBox('物业维修')">
                <h3>物业维修</h3>
            </div>
            <div class="list-item" onclick="openChatBox('人文关怀')">
                <h3>人文关怀</h3>
            </div>
            <div class="list-item" onclick="openChatBox('紧急响应服务')">
                <h3>紧急响应服务</h3>
            </div>
<!--            <div class="list-item" onclick="openMyDetail('个人信息')">-->
<!--                <div class="avatar" style="width: 60px; height: 60px;"></div>-->
<!--                <h3>我的昵称</h3>-->
<!--            </div>-->
<!--            <div>-->
<!--                <div class="list-item" onclick="openMyDetail('设置')">-->
<!--                    <span style="font-size: 20px; color: #555; margin-right: 15px;">设置图标</span>-->
<!--                    <h3>设置</h3>-->
<!--                </div>-->
<!--            </div>-->
      </div>
        <!-- 智能机器人服务页 -->
        <div id="smart-robot-service" class="page">
            <div class="list-item" onclick="openChatBox('日常陪伴')">
                <h3>日常陪伴</h3>
            </div>
            <div class="list-item" onclick="openChatBox('家务辅助')">
                <h3>家务辅助</h3>
            </div>
            <div class="list-item" onclick="openChatBox('健康监测')">
                <h3>健康监测</h3>
            </div>
            <div class="list-item" onclick="openChatBox('娱乐互动')">
                <h3>娱乐互动</h3>
            </div>
            <div class="list-item" onclick="openChatBox('安全监护')">
                <h3>安全监护</h3>
            </div>
        </div>
        <!-- 聊天框 -->
        <div id="chat-box">
            <header class="common-header">
                <div class="icon-circle-arrow-left" onclick="closeChatBox()"></div>
                <h1 id="chat-box-title"></h1>
                <span style="font-size: 20px; color: #555; cursor: pointer;">更多</span>
            </header>
            <div class="chat-messages" id="chat-messages"></div>
            <div class="chat-input">
                <input type="text" id="chat-input" placeholder="输入消息" onkeydown="handleKeyDown(event)">
                <button onclick="sendMessage()">发送</button>
            </div>
        </div>
        <!-- 通讯录详情页 -->
        <div id="contact-detail" class="detail-page">
            <header class="common-header">
                <div class="icon-circle-arrow-left" onclick="closeDetailPage('contact-detail')"></div>
                <h1 id="contact-detail-title"></h1>
            </header>
            <div class="detail-content">
                <!-- 这里可以添加联系人详情内容 -->
                <p>联系人详情信息...</p>
            </div>
        </div>
        <!-- 发现详情页 -->
        <div id="discovery-detail" class="detail-page">
            <header class="common-header">
                <div class="icon-circle-arrow-left" onclick="closeDetailPage('discovery-detail')"></div>
                <h1 id="discovery-detail-title"></h1>
            </header>
            <div class="detail-content">
                <!-- 这里可以添加发现详情内容 -->
                <p>发现详情信息...</p>
            </div>
        </div>
        <!-- 我的详情页 -->
        <div id="my-detail" class="detail-page">
            <header class="common-header">
                <div class="icon-circle-arrow-left" onclick="closeDetailPage('my-detail')"></div>
                <h1 id="my-detail-title"></h1>
            </header>
            <div class="detail-content">
                <!-- 这里可以添加我的详情内容 -->
                <p>我的详情信息...</p>
            </div>
        </div>
    </main>
    <footer>
        <a href="#" onclick="showPage('chat-list'); return false;" class="active">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign">
            <line x1="12" y1="1" x2="12" y2="23"></line>
            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
         </svg>

            <p>金融理财服务</p>
        </a>
        <a href="#" onclick="showPage('contacts-list'); return false;">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video">
              <polygon points="23 7 16 12 23 17 23 7"></polygon>
              <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
           </svg>

            <p>视频互动与人工客服</p>
        </a>
        <a href="#" onclick="showPage('discovery-list'); return false;">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
               <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
            </svg>

            <p>健康管理与提醒</p>
        </a>
        <a href="#" onclick="showPage('me'); return false;">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                  <polyline points="9 22 9 12 15 12 15 22"></polyline>
            </svg>


            <p>居家养老方案</p>
        </a>
        <a href="#" onclick="showPage('smart-robot-service'); return false;">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-robot">
                  <path d="M14 3v4a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1z"></path>
                  <path d="M9 3v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z"></path>
                  <path d="M9 8h6"></path>
                  <path d="M12 12v6"></path>
                  <path d="M12 18a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
            </svg>


            <p>智能机器人服务</p>
        </a>
    </footer>
    <script>
        function showPage(pageId) {
            const pages = document.querySelectorAll('.page');
            pages.forEach(page => {
                page.classList.remove('active');
            });
            const selectedPage = document.getElementById(pageId);
            selectedPage.classList.add('active');

            const navLinks = document.querySelectorAll('footer a');
            navLinks.forEach(link => {
                link.classList.remove('active');
            });
            const activeLink = Array.from(navLinks).find(link => link.getAttribute('onclick').includes(pageId));
            if (activeLink) {
                activeLink.classList.add('active');
            }
        }

        function openChatBox(friendName) {
            const chatBox = document.getElementById('chat-box');
            const chatBoxTitle = document.getElementById('chat-box-title');
            chatBoxTitle.textContent = friendName;
            chatBox.style.display = 'flex';
        }

        function closeChatBox() {
            const chatBox = document.getElementById('chat-box');
            chatBox.style.display = 'none';
        }

        function sendMessage() {
            const chatInput = document.getElementById('chat-input');
            const message = chatInput.value;
            if (message) {
                const chatMessages = document.getElementById('chat-messages');
                const messageElement = document.createElement('div');
                messageElement.classList.add('message', 'me');
                const bubble = document.createElement('div');
                bubble.classList.add('bubble');
                bubble.textContent = message;
                messageElement.appendChild(bubble);
                chatMessages.appendChild(messageElement);
                chatInput.value = '';
            }
        }

        function handleKeyDown(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        }

        function openContactDetail(contactName) {
            const contactDetail = document.getElementById('contact-detail');
            const contactDetailTitle = document.getElementById('contact-detail-title');
            contactDetailTitle.textContent = contactName;
            contactDetail.style.display = 'block';
        }

        function openDiscoveryDetail(discoveryName) {
            const discoveryDetail = document.getElementById('discovery-detail');
            const discoveryDetailTitle = document.getElementById('discovery-detail-title');
            discoveryDetailTitle.textContent = discoveryName;
            discoveryDetail.style.display = 'block';
        }

        function openMyDetail(myDetailName) {
            const myDetail = document.getElementById('my-detail');
            const myDetailTitle = document.getElementById('my-detail-title');
            myDetailTitle.textContent = myDetailName;
            myDetail.style.display = 'block';
        }

        function closeDetailPage(pageId) {
            const detailPage = document.getElementById(pageId);
            detailPage.style.display = 'none';
        }
    </script>
</body>

</html>